<template>
  <div class="container tree-list-layout">
    <treeOffice @click="handleTreeClick" ref="treeOffice"  class="box-left"/>
    <data-view
      ref="dataView"
      propViewKey="sys_user_crud"
      propViewForm="sys/user/detail.vue"
      :propInitData="selectedTreeNode"
      @extra-button-click="extraButtonClick"
      :propIsTdesign="true"
      class="box-right"
      :propBeforeClick="propBeforeClickDtl"
      :propAfterWinClose="loadTree"
    />
    <!--角色权限 -->
    <customDrawer title="角色权限"
                  ref="customDrawerRole"
                  :widthPx="500"
                  :heightPx="500"
                  @confirm="roleConfirm">
      <template #content>
        <customForm :data="roleForm">
          <template #content>
            <customFormItem fullWidth label="用户昵称" name="nickname" :parent="_self" :form="roleForm" disabled />
            <customFormItem fullWidth label="角色设置"
                            name="rolesId"
                            :parent="_self"
                            :form="roleForm"
                            :type="constCommon.formItemType.checkbox.name"
                            :config="{ options: roleOptions, fullItem: true }"
            />
          </template>
        </customForm>
      </template>
    </customDrawer>

  </div>
</template>

<script>
import treeOffice from '@/components/custom/bus/treeOffice.vue'

export default {
  name: 'user',
  data() {
    return {
      selectedTreeNode: {},
      roleForm: {
        id: "",
        nickname: "",
        rolesId: []
      },
      roleOptions: [],
      defaultRoleValue: []
    }
  },
  created() {
  },

  mounted() {
    const that = this
    this.$ajax.get("/upms/roles/list").then(resp => {
      resp.data.map((item, index) => {
        const {name: label, id: value} = item
        that.$set(that.roleOptions, index, {label, value, ...item})
      })
    })
  },

  components: {
    treeOffice,
  },
  watch: {
  },
  methods: {
    // 加载树
    loadTree() {
      this.$refs.treeOffice.load()
    },
    // 加载列表
    loadDtl() {
      let wrapper = this.$newWrapper()
      let id = this.strings.defaultIfBlank(this.selectedTreeNode.id, '0')
      if (id != '0') {
        wrapper.eq('officeId', id)
      }
      this.$refs.dataView.setQueryWrapper(wrapper)
    },
    handleTreeClick(data) {
      this.selectedTreeNode = data
      this.loadDtl()
    },
    extraButtonClick({button, data}) {
      let buttonKey = button.key
      if (buttonKey === 'resetPassword') {
        this.$confirm('此操作将重置用户密码, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.utilVue.loadShow(true)
          this.$ajax.post(`/upms/users/${data.id}/resetPassword`).then(resp => {
            this.utilVue.loadHide()
            if(resp.success) {
              this.utilMessage.success(resp.msg)
              this.loadDtl()
            }
          })
        })
      }
      if (buttonKey === 'setRole') { //授权
        this.$set(this.roleForm, 'nickname', data.nickname)
        this.$set(this.roleForm, 'rolesId', data.rolesId)
        this.roleForm.id = data.id
        this.$refs.customDrawerRole.show()
      }
    },
    // 权限提交
    roleConfirm() {
      this.utilVue.loadShow(true)
      this.$ajax.put("/upms/users/assignRole", this.roleForm).then(resp => {
        this.utilVue.loadHide()
        if(resp.success) {
          this.utilMessage.success(resp.msg)
          this.loadDtl()
        }
      })
    },
    // 列表按钮点击前操作
    propBeforeClickDtl(button) {
      const _selectedData = this.selectedTreeNode
      //列表添加按钮
      if (button.key === "vb-add") {
        if(!_selectedData || !_selectedData.id ||  _selectedData.id === "0") {
          this.utilMessage.warning('请选择下级机构')
          return false
        }
      }
      return true
    },
  }
}
</script>

<style lang="scss" scoped>
.container {
  height: 100%;
  background-color: #fff;
}
.tree-container {
  padding:10px;
  margin-right:20px;
  border:solid 1px #DCDFE6;
  height:100%
}
.tree-filter {
  margin:10px;
  width:80%
}
</style>
